<template>
  <div class="result">
    <div class="historyWrap">
      <p
        class="title"
        v-if="
          formData.keywords.length > 0 ||
            formData.territory1Node.length > 0 ||
            formData.territory2Node.length > 0 ||
            formData.territory3Node.length > 0 ||
            formData.territory4Node.length > 0 ||
            formData.moduleNode.length > 0 ||
            formData.companyNode.length > 0 ||
            formData.productionNode.length > 0 ||
            formData.peopleNode.length > 0 ||
            formData.infoSiteNode.length > 0 ||
            formData.siteInforNode.length > 0 ||
            formData.sepcialSiteNode.length > 0
        "
      >
        需要筛选的条件：
      </p>
      <el-form size="mini" label-width="100px">
        <el-form-item v-if="formData.moduleNode.length > 0" label="选择模块：">
          <el-tag
            :key="tag"
            v-for="(tag, i) in formData.moduleNode"
            closable
            size="mini"
            :disable-transitions="false"
            @close="handleClose(tag, i, 'moduleNode', 'module')"
          >
            {{ tag }}
          </el-tag>
        </el-form-item>
        <el-form-item v-if="formData.companyNode.length > 0" label="选择公司：">
          <el-tag
            :key="tag"
            v-for="(tag, i) in formData.companyNode"
            closable
            size="mini"
            :disable-transitions="false"
            @close="handleClose(tag, i, 'companyNode', 'company')"
          >
            {{ tag }}
          </el-tag>
        </el-form-item>
        <el-form-item
          v-if="formData.productionNode.length > 0"
          label="选择产品："
        >
          <el-tag
            :key="tag"
            v-for="(tag, i) in formData.productionNode"
            closable
            size="mini"
            :disable-transitions="false"
            @close="handleClose(tag, i, 'productionNode', 'production')"
          >
            {{ tag }}
          </el-tag>
        </el-form-item>
        <el-form-item v-if="formData.peopleNode.length > 0" label="选择人物：">
          <el-tag
            :key="tag"
            v-for="(tag, i) in formData.peopleNode"
            closable
            size="mini"
            :disable-transitions="false"
            @close="handleClose(tag, i, 'peopleNode', 'people')"
          >
            {{ tag }}
          </el-tag>
        </el-form-item>
        <el-form-item
          v-if="formData.territory1Node.length > 0"
          label="内容地域："
        >
          <el-tag
            :key="tag"
            v-for="(tag, i) in formData.territory1Node"
            closable
            size="mini"
            :disable-transitions="false"
            @close="handleClose(tag, i, 'territory1Node', 'territory1')"
          >
            {{ tag }}
          </el-tag>
        </el-form-item>
        <el-form-item
          v-if="formData.territory2Node.length > 0"
          label="ICP地域："
        >
          <el-tag
            :key="tag"
            v-for="(tag, i) in formData.territory2Node"
            closable
            size="mini"
            :disable-transitions="false"
            @close="handleClose(tag, i, 'territory2Node', 'territory2')"
          >
            {{ tag }}
          </el-tag>
        </el-form-item>
        <el-form-item
          v-if="formData.territory3Node.length > 0"
          label="泛主题地域："
        >
          <el-tag
            :key="tag"
            v-for="(tag, i) in formData.territory3Node"
            closable
            size="mini"
            :disable-transitions="false"
            @close="handleClose(tag, i, 'territory3Node', 'territory3')"
          >
            {{ tag }}
          </el-tag>
        </el-form-item>
        <el-form-item
          v-if="formData.territory4Node.length > 0"
          label="确主题地域："
        >
          <el-tag
            :key="tag"
            v-for="(tag, i) in formData.territory4Node"
            closable
            size="mini"
            :disable-transitions="false"
            @close="handleClose(tag, i, 'territory4Node', 'territory4')"
          >
            {{ tag }}
          </el-tag>
        </el-form-item>
        <el-form-item v-if="formData.siteInforNode.length > 0" label="站点：">
          <el-tag
            :key="tag"
            v-for="(tag, i) in formData.siteInforNode"
            closable
            size="mini"
            :disable-transitions="false"
            @close="handleClose(tag, i, 'siteInforNode', 'siteInfor')"
          >
            {{ tag }}
          </el-tag>
        </el-form-item>
        <el-form-item
          v-if="formData.sepcialSiteNode.length > 0"
          label="特殊站点："
        >
          <el-tag
            :key="tag"
            v-for="(tag, i) in formData.sepcialSiteNode"
            closable
            size="mini"
            :disable-transitions="false"
            @close="handleClose(tag, i, 'sepcialSiteNode', 'sepcialSite')"
          >
            {{ tag }}
          </el-tag>
        </el-form-item>
        <el-form-item v-if="formData.keywords.length > 0" label="关键词：">
          <el-tag
            :key="i"
            v-for="(tag, i) in keywords"
            closable
            size="mini"
            :disable-transitions="false"
            @close="handleClose(tag, i, 'keywords')"
          >
            {{ tag }}
          </el-tag>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { createNamespacedHelpers } from 'vuex'
const { mapState, mapMutations } = createNamespacedHelpers('charts')
export default {
  name: 'result',
  data() {
    return {
      keywords: []
    }
  },
  methods: {
    handleClose(val, index, key1) {
      let data = { data: {} }
      for (let i = 2; i < arguments.length; i++) {
        let data1 = JSON.parse(JSON.stringify(this.formData[arguments[i]]))
        data1.splice(index, 1)
        data.data[arguments[i]] = data1
        this.setFormData(data)
      }
    },
    init() {
      this.keywords = []
      this.chartsCondition.keywords.forEach(element => {
        element = element.split(':')
        this.keywords.push(element[1] + ' ' + element[2])
      })
    },
    ...mapMutations(['setFormData'])
  },
  mounted() {
    this.init()
  },
  computed: {
    ...mapState(['formData', 'chartsCondition'])
  },
  watch: {
    'formData.keywords'(val) {
      let _this = this
      this.keywords = []
      val.forEach(element => {
        element = element.split(':')
        _this.keywords.push(element[1] + ' ' + element[2])
      })
    },
    'chartsCondition.keywords1'(val) {
      this.init()
    }
  }
}
</script>

<style scoped>
.title {
  font-size: 14px;
  font-weight: bold;
  color: #000;
}
</style>
